<template>
	<view class="container page-box">
		<view class="pad-32">
			<view class="pad-24 bg-white radius16 mar-bottom-24" v-for="(item,index) in addressList" :key="item.id">
				<view class="color-text font-30">{{item.province}}{{item.city}}{{item.region}}{{item.street}}{{item.detail}}</view>
				<view class="color-646464 font-28 mar-top-20">联系电话:{{item.tel}}</view>
				<view class="buttom betweenX pad-top-24">
					<view></view>
					<view class="button-box">
						<text @click="hanldeDel(index,item)" class="del mar-right-24">删除</text>
						<text @click="hanldeEdit(item)" class="edit">修改</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="addressList.length == 0" width="75" height="75" text="没有收货地址"
			icon="/static/image/empty-add.png"></u-empty>

		<my-popup content="您确定删除这条地址吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>
		<view class="betweenX button-bottom centerXY">
			<view @click="hanldeAddedit" class="btn mar-left-20 button-style">新增</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { getAddressAll, postAddressDel } from '@/api/index.js'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import {dataReportFun} from '@/util/dataReport.js'
	
	onLoad((option) => {
		dataReportFun({
			event: "client.page_view",
		})
	})

	// 新增地址
	const hanldeAddedit = () => {
		uni.navigateTo({
			url: '/pages/address/edit'
		})
	}

	// 获取地址
	const addressList = ref([]);
	const getUserAddressList = () => {
		getAddressAll().then(res => {
			if (res.code == 200) {
				addressList.value = res.data.lists;
			}
		})
	}

	// 认证弹窗
	let isPopup = ref(false);
	// 当前条数据
	let itemRow = ref({});

	// 删除 地址
	const hanldeDel = (index, row) => {
		itemRow.value = row;
		isPopup.value = true;
	}

	// 确定删除
	const hanldeConfirm = () => {
		postAddressDel({
			ids: [itemRow.value.id]
		}).then(res => {
			getUserAddressList();
			isPopup.value = false;
		})
	}

	// 跳转去修改地址
	const hanldeEdit = (item) => {
		uni.setStorageSync('address', item);
		uni.navigateTo({
			url: '/pages/address/edit?id=' + item.id
		})
	}

	// 初始化 
	onShow(() => {
		getUserAddressList();
	})
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		/* #ifdef MP-WEIXIN */
		padding-bottom: 100rpx;
		/* #endif */

		.buttom {
			border-top: 2rpx solid #f2f2f2;
			margin-top: 24rpx;
		}

		.checkbox-border {
			border: 2rpx solid rgb(200, 201, 204);
			box-sizing: border-box;
			height: 32rpx;
			width: 32rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.button-box {
			.del {
				border: 1rpx solid $uni-color-error;
				color: $uni-color-error;
				font-size: 24rpx;
				padding: 6rpx 25rpx;
				border-radius: 8rpx;
			}

			.edit {
				border: 1rpx solid $uni-color-primary;
				color: $uni-color-primary;
				font-size: 24rpx;
				padding: 6rpx 25rpx;
				border-radius: 8rpx;
			}
		}

		.button-bottom {
			width: 100%;
			padding: 35rpx 40rpx;
			box-sizing: border-box;
			background: white;
			position: fixed;
			bottom: 0rpx;
			z-index: 2;
		}

		.btn {
			width: 100%;
			height: 100rpx;
			border-radius: 50rpx;
			border: 2rpx solid #C1C1C1;
			line-height: 100rpx;
			text-align: center;
		}

	}

	.button-bottom {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 100rpx;
		z-index: 2;
	}

	.btn {
		width: 200rpx;
		height: 80rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 80rpx;
		text-align: center;
	}
</style>